<template>
	<view>
		<view class="">
			<view class="a">
				<image :src="src" mode=""></image>
			</view>
		</view>
		<u-form labePostion='left' :model="userInfo" :rules="rules" ref="uForm">
			<view class="d">
				<text class="prefix-text">用户名:</text>
				<u--input class="b" border="surround" v-model="userInfo.userName"></u--input>
				<template #prefix>
				</template>
			</view>
			<view class="">
				<view class="c">
					<text class="prefix-text">密码:</text>
					<u--input type="password" class="b1" border="surround" v-model="userInfo.password" ></u--input>
				</view>
			</view>
			<view class="" style="padding-top:20rpx"></view>
			<view class="arr">
				<view class="btn">
					<u-button type="primary" text="登录" @click="submit"></u-button>
					<view style="height: 20rpx;"></view>
					<u-button type="success" text="注册"></u-button>
				</view>
			</view>
		</u-form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import http from '../../http';
	export default {
		data() {
			return {
				showSex: false,
				src: '/static/icon/002.png',
				userInfo: {
					userName: 'student',
					password: '',
					remember: false
				},
				rules: {
					'userName': {
						type: 'string',
						required: true,
						message: '请填写用户',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					http({
						url: '/api/user/login',
						method: "post",
						data: this.userInfo
					}).then(res => {
						if (res.code === 1) {
							this.$refs.uToast.show({
								type: 'success',
								message: '登陆成功',
								duration: 1000,
								complete() {
									uni.switchTab({
										url: '/pages/studentpage/shouye'
									})
								}
							});
						}else{
							this.$refs.uToast.show({
								type: 'error',
								message: res.message,
								duration: 1000,
								
							});
						}
					})
				}).catch(errors=>{
					
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0 auto;
		padding: 0;
	}

	.a {
		width: 100%;
		height: 300rpx;
		background-color: #F7F7F7;
		display: flex;
		align-items: center;
		position: relative;

		image {
			width: 55%;
			height: 250rpx;
			padding-right: 50rpx;
		}
	}

	.b {
		position: absolute;
		top: 285rpx;
		left: 150rpx;
		border: none;
	}

	.b1 {
		position: absolute;
		top: 435rpx;
		left: 150rpx;
		border: none;
	}

	.d,
	.c {
		background-color: #F7F7F7;
		color: #243C4C;
		width: 750;
		padding: 0 0 20rpx 30rpx;
	}

	.c {
		height: 70rpx;
		margin-top: 70rpx;
		line-height: 80rpx;
	}

	.btn {
		background-color: #F7F7F7;
		height: 100%;
		width: 100%;
		margin-top: 50rpx;
	}

	.arr {
		height: 100%;
		width: 100%;
		background-color: #FFFFFF;
	}
</style>